<!--
 * @Author: zjf
 * @Date: 2023-07-18 16:32:19
 * @LastEditors: JenClint
 * @LastEditTime: 2024-01-05 10:48:27
 * @Description:
-->
<template>
	<div class="content ">
		<div class="content-ls">
			<div class="content-ls-item" v-for="item in typeOptions" :key="item.prop" @click="handleChange(item)"
				:class="{isactive:item.prop == select}">
				<span class="item-label">{{item.label || '---'}}</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	components: {

	},
	props: {},
	data() {
		return {
			select: 'landUseType',
			typeOptions: [
				{ label: '用地类型', prop: 'landUseType', },
				{ label: '亩均税收', prop: 'averageTaxPerMu', },
				{ label: '更新方式', prop: 'updateMode', },
				{ label: '更新进度', prop: 'updateProgress', },
			],
		};
	},
	watch: {},
	computed: {
	},
	created() {

	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			this.loadData()
		},

		async loadData() {

		},
		handleChange(info) {
			if (this.select !== info.prop) {
				this.select = info.prop
				this.$emit('change', info)
			}

		},
	}
};
</script>
<style lang="scss" scoped>
.content {
	display: flex;
	align-items: center;
	pointer-events: all;
	position: relative;
	margin: 0 15px;
	max-width: 500px;
	overflow-x: auto;
}
.content-ls {
	position: relative;
	display: flex;
	flex-direction: row;
	background: #fff;
	border-radius: 4px;
	// padding: 2px 4px;
	.content-ls-item {
		display: flex;
		flex-direction: column;
		padding: 4px 12px;
		cursor: pointer;
		color: #000;

		.item-label {
			font-family: SourceHanSansSC-Heavy, SourceHanSansSC;
			font-weight: 600;
			white-space: nowrap;
		}
		&:hover {
			// background: #0960d6;
		}
		&.isactive {
			border-radius: 4px;
			background-color: #0960d6;
			color: #fff;
		}
	}
}
</style>